<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script type="text/javascript">
		var canvas=document.getElementById("canvas");
		var ctx=canvas.getContext("2d");
		canvas.width=window.screen.width;
		canvas.height=window.screen.height;

		var rectWidth=50;
		var rectHeight=50;
		for(i=0;i<canvas.width/rectWidth;i++){
			//绘制竖线
			ctx.moveTo(i*rectWidth,0);
			ctx.lineTo(i*rectWidth,canvas.width);
			ctx.stroke()

			//绘制横线
			ctx.moveTo(0,rectHeight*i);
			ctx.lineTo(canvas.width,rectHeight*i)
			ctx.stroke()

		}
	</script>
</body>
</html>